import { defineComponent } from 'vue'
import { NAvatar, NModal } from 'naive-ui'
import { useUserCenter } from '../tab/user-center-tab/use-user-center'
import styles from './index.module.scss'
import { format } from 'date-fns'

const UserDetailModal = defineComponent({
  name: 'UserDetailModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      required: true
    }
  },
  emits: ['modalShowChange'],
  setup() {
    const { variables, getDepartmentFullName } = useUserCenter()
    return {
      variables,
      getDepartmentFullName
    }
  },
  watch: {
    userInfo() {
      //获取部门全称
      this.getDepartmentFullName(this.userInfo.departmentId)
    }
  },
  methods: {
    onNegativeClick() {
      this.$emit('modalShowChange', false)
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('user.userDetailTitle')}
        bordered={false}
        size='huge'
        preset='dialog'
        onClose={this.onNegativeClick}
      >
        <div class={styles.user}>
          <div class={styles.head}>
            <NAvatar round size={80} src={this.userInfo.headImgUrl} />
          </div>
          <div class={styles.userinfo}>
            <table>
              <tbody>
                <tr>
                  <td>{window.$t('user.username')}</td>
                  <td>{this.userInfo.username}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.nickname')}</td>
                  <td>{this.userInfo.nickname}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.mobile')}</td>
                  <td>{this.userInfo.mobile}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.email')}</td>
                  <td>{this.userInfo.email}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.sex')}</td>
                  <td>
                    {this.userInfo.sex === 0
                      ? window.$t('user.man')
                      : window.$t('user.woman')}
                  </td>
                </tr>
                <tr>
                  <td>{window.$t('user.department')}</td>
                  <td>{this.variables.departmentFullName}</td>
                </tr>
                <tr v-show={this.userInfo.roles}>
                  <td>{window.$t('user.roles')}</td>
                  <td>
                    {this.userInfo.roles
                      ? this.userInfo.roles
                          .map((item: { name: any }) => item.name)
                          .join(',')
                      : ''}
                  </td>
                </tr>
                <tr v-show={this.userInfo.proRoles}>
                  <td>{window.$t('user.proRoles')}</td>
                  <td>
                    {this.userInfo.proRoles
                      ? this.userInfo.proRoles
                          .map((item: { name: any }) => item.name)
                          .join(',')
                      : ''}
                  </td>
                </tr>
                <tr>
                  <td>{window.$t('common.createTime')}</td>
                  <td>
                    {format(
                      new Date(this.userInfo.createTime),
                      'yyyy-MM-dd HH:mm:ss'
                    )}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </NModal>
    )
  }
})

export default UserDetailModal
